<template>
  <div>
    <div :[name]="value">v-bind动态绑定属性名称和值</div>
    <button @click="toggle">切换控制属性</button>
    <br />
    <h2>v-bind动态绑定一个对象</h2>
    <div v-bind="info">v-bind动态绑定一个对象</div>
  </div>
</template>

<script>
export default {
  name: 'binddt',
  data() {
    return {
      name: 'username',
      value: '张三',
      info: {
        name: 'zhangsan',
        age: 18,
        height: 1.88
      }
    }
  },
  methods: {
    toggle() {
      this.name = this.name === 'username' ? 'age' : 'username'
      console.log('this.name: ', this.name)
    }
  }
}
</script>

<style lang="scss" scoped></style>
